<template>
    <div>
        <div class="operarea">
            <div class="btnList">
                <el-button size="mini" @click="back">{{$t('return')}}</el-button>
            </div>
        </div>
        <el-card class="cardBox">
            <div class="operarea">
                <div class="btnList">
                    <el-button size="mini" @click="exportDialogVisible = true">{{$t('export')}}</el-button>
                    <el-button size="mini" @click="verifyDialogVisible = true" v-if="state === '1'">{{$t('confirm')}}</el-button>
                    <el-button size="mini" @click="verifyCrewDialogVisible = true" v-if="state === '2'">{{$t('confirm')}}</el-button>
                    <el-button size="mini" @click="verifyTextDialogVisible = true" v-if="state === '3'">{{$t('confirm')}}</el-button>
                    <el-button size="mini" @click="portDialogVisible = true" v-if="state === '4'">{{$t('confirmthedelivery')}}</el-button>
                    <el-button size="mini" @click="consigneeDialogVisible = true" v-if="state === '5'">{{$t('confirmationofgoodsreceipt')}}</el-button>
                    <el-button size="mini" @click="orderSucDialogVisible = true" v-if="state === '6'">{{$t('ordercomp')}}</el-button>
                </div>
            </div>
            <div class="viewBox">
                <div class="top"></div>
                <div class="content">
                    <div class="orderDet">{{$t('orderdetails')}}</div>
                    <div class="detContent">
                        <!-- 订单详情 -->
                        <div class="orderData">
                            <el-row>
                                <el-col :span="6">
                                    <div class="grid-content bg-purple">
                                        {{$t('username')}}：
                                        <span>Mohmmed</span>
                                    </div>
                                </el-col>
                                <el-col :span="6">
                                    <div class="grid-content bg-purple-light">
                                        {{$t('ordernum')}}：
                                        <span>OM1593335446926659</span>
                                    </div>
                                </el-col>
                                <el-col :span="6">
                                    <div class="grid-content bg-purple">
                                        {{$t('orderstate')}}：
                                        <span>{{$t('offthestocks')}}</span>
                                    </div>
                                </el-col>
                                <el-col :span="6">
                                    <div class="grid-content bg-purple">
                                        {{$t('earmoney')}}：
                                        <span>{{$t('havepaid')}}</span>
                                    </div>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="6">
                                    <div class="grid-content bg-purple">
                                        {{$t('customprice')}}：
                                        <span>1050501</span>
                                    </div>
                                </el-col>
                                <el-col :span="6">
                                    <div class="grid-content bg-purple-light">
                                        {{$t('number')}}：
                                        <span>1</span>
                                    </div>
                                </el-col>
                                <el-col :span="6">
                                    <div class="grid-content bg-purple">
                                        {{$t('totalprice')}}：
                                        <span>2000000</span>
                                    </div>
                                </el-col>
                                <el-col :span="6">
                                    <div class="grid-content bg-purple">
                                        {{$t('downpaypaid')}}：
                                        <span>100000</span>
                                    </div>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="6">
                                    <div class="grid-content bg-purple">
                                        {{$t('unpaidbalance')}}：
                                        <span>100000</span>
                                    </div>
                                </el-col>
                            </el-row>
                        </div>
                        <!-- 经手人员 -->
                        <div class="materusage" v-if="state !== '0' && state !== '1'">
                            <div class="dosageTab">
                                <div class="row">
                                    <div>{{$t('orderconfirmer')}}</div>
                                    <div>{{$t('orderdistributor')}}</div>
                                    <div>{{$t('orderdirector')}}</div>
                                </div>
                                <div class="row">
                                    <div>{{orderPer.confirm}}</div>
                                    <div>{{orderPer.distributor}}</div>
                                    <div>{{orderPer.director}}</div>
                                </div>
                            </div>
                        </div>
                        <!-- 物料用量表 -->
                        <div class="materusage" v-if="state !== '0'">
                            <div class="tabTop">
                                {{$t('materusage')}}
                            </div>
                            <div class="dosageTab">
                                <div class="row">
                                    <div>{{$t('nameofmate')}}</div>
                                    <div>{{$t('attribute')}}</div>
                                    <div>{{$t('dosage')}}</div>
                                    <div>{{$t('unit')}}</div>
                                    <div v-if="state === '1'">{{$t('operation')}}</div>
                                </div>
                                <div class="row" v-for="(item, i) in dosageTab" :key="i">
                                    <div>{{item.name}}</div>
                                    <div>{{item.type}}</div>
                                    <div>{{item.number}}</div>
                                    <div>{{item.unit}}</div>
                                    <div v-if="state === '1'">
                                        <img src="@/assets/edit.png" :alt="$t('picisgone')" @click="getMaterialDetails(item)">
                                    </div>
                                </div>
                            </div>
                            <div class="tabBotom" v-if="state === '1'" @click="addWuDialogVisible = true">+{{$t('matetoadd')}}</div>
                        </div>
                        <!-- 制作记录表 -->
                        <div class="materusage" v-if="state !== '0' && state !== '1'">
                            <div class="tabTop">
                                {{$t('makerecordsheet')}}
                            </div>
                            <div class="dosageTab">
                                <div class="row">
                                    <div>{{$t('stage')}}</div>
                                    <div>{{$t('staff')}}</div>
                                    <div>{{$t('time')}}</div>
                                    <div>{{$t('remark')}}</div>
                                    <div v-if="state === '2'">{{$t('operation')}}</div>
                                </div>
                                <div class="row" v-for="(item, i) in makeRecordTab" :key="i">
                                    <div>{{item.stage}}</div>
                                    <div>{{item.staff}}</div>
                                    <div>{{item.time}}</div>
                                    <div>{{item.remark}}</div>
                                    <div v-if="state === '2'">
                                        <img src="@/assets/edit.png" :alt="$t('picisgone')" @click="getItemDetails(item)">
                                    </div>
                                </div>
                            </div>
                            <div class="tabBotom" v-if="state === '2'" @click="addCrewDialogVisible = true">+{{$t('personassig')}}</div>
                        </div>
                        <!-- 检测记录表 -->
                        <div class="materusage" v-if="state !== '0' && state !== '1' && state !== '2'">
                            <div class="tabTop">
                                {{$t('testrecordsheet')}}
                            </div>
                            <div class="dosageTab">
                                <div class="row">
                                    <div>{{$t('testingresult')}}</div>
                                    <div>{{$t('staff')}}</div>
                                    <div>{{$t('time')}}</div>
                                    <div>{{$t('remark')}}</div>
                                    <div v-if="state === '3'">{{$t('operation')}}</div>
                                </div>
                                <div class="row" v-for="(item, i) in detectionTab" :key="i">
                                    <div>{{item.testingresult}}</div>
                                    <div>{{item.name}}</div>
                                    <div>{{item.time}}</div>
                                    <div>{{item.remark}}</div>
                                    <div v-if="state === '3'">
                                        <img src="@/assets/edit.png" :alt="$t('picisgone')" @click="getDetectionDetails(item)">
                                    </div>
                                </div>
                            </div>
                            <div class="tabBotom" v-if="state === '3'" @click="addTextDialogVisible = true">+{{$t('testingresult')}}</div>
                        </div>
                        <!-- 发货记录表 -->
                        <div class="materusage" v-if="state !== '0' && state !== '1' && state !== '2' && state !== '3' && state !== '4'">
                            <div class="tabTop">
                                {{$t('deliveryrecord')}}
                            </div>
                            <div class="dosageTab">
                                <div class="row">
                                    <div>{{$t('trackingnumber')}}</div>
                                    <div>{{$t('time')}}</div>
                                    <div>{{$t('consigner')}}</div>
                                    <div v-if="state === '5'">{{$t('operation')}}</div>
                                </div>
                                <div class="row">
                                    <div>{{express.trackingnumber}}</div>
                                    <div>{{express.time}}</div>
                                    <div>{{express.consigner}}</div>
                                    <div v-if="state === '5'">
                                        <img src="@/assets/edit.png" :alt="$t('picisgone')" @click="getShipmentsDetails(express)">
                                    </div>
                                </div>
                            </div>
                            <div class="tabBotom" v-if="state === '5'" @click="addDeliveryDialogVisible = true">+{{$t('deliveryrecordn')}}</div>
                        </div>
                    </div>
                </div>
                <div class="bottom"></div>
            </div>
        </el-card>
        <!-- 导出 -->
        <el-dialog :title="$t('export')" :visible.sync="exportDialogVisible" width="420px" class="smallDlog">
            <span>{{$t('whetoexptabdata')}}</span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="exportDialogVisible = false">{{$t('cancel')}}</el-button>
                <el-button type="primary" @click="exportData">{{$t('confirm')}}</el-button>
            </span>
        </el-dialog>
        <!-- 物料添加 -->
        <el-dialog :title="$t('add')" :visible.sync="addWuDialogVisible" width="500px" class="smallDlog" :close-on-click-modal="false" @close="addWuDlogClose(addWuDataForm)">
            <el-form :model="addWuDataForm" :rules="addWuRules" :ref="addWuDataForm" class="motuoForm">
                <el-form-item :label="$t('nameofmate')" label-width="70px" prop="name">
                    <el-input v-model="addWuDataForm.name" autocomplete="off" clearable :placeholder="$t('plsent')"></el-input>
                </el-form-item>
                <el-form-item :label="$t('attribute')" label-width="70px" prop="type">
                    <el-input v-model="addWuDataForm.type" autocomplete="off" clearable :placeholder="$t('plsent')"></el-input>
                </el-form-item>
                <el-form-item :label="$t('dosage')" label-width="70px" prop="number">
                    <el-input v-model="addWuDataForm.number" autocomplete="off" clearable :placeholder="$t('plsent')"></el-input>
                </el-form-item>
                <el-form-item :label="$t('unit')" label-width="70px" prop="unit">
                    <el-input v-model="addWuDataForm.unit" autocomplete="off" clearable :placeholder="$t('plsent')"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="addWuDialogVisible = false">{{$t('cancel')}}</el-button>
                <el-button type="primary" @click="addWuData(addWuDataForm)">{{$t('confirm')}}</el-button>
            </span>
        </el-dialog>
        <el-dialog :title="$t('modify')" :visible.sync="editWuDialogVisible" width="500px" class="smallDlog" :close-on-click-modal="false" @close="editWuDlogClose(editWuDataForm)">
            <el-form :model="editWuDataForm" :rules="editWuRules" :ref="editWuDataForm" class="motuoForm">
                <el-form-item :label="$t('nameofmate')" label-width="70px" prop="name">
                    <el-input v-model="editWuDataForm.name" autocomplete="off" clearable :placeholder="$t('plsent')"></el-input>
                </el-form-item>
                <el-form-item :label="$t('attribute')" label-width="70px" prop="type">
                    <el-input v-model="editWuDataForm.type" autocomplete="off" clearable :placeholder="$t('plsent')"></el-input>
                </el-form-item>
                <el-form-item :label="$t('dosage')" label-width="70px" prop="number">
                    <el-input v-model="editWuDataForm.number" autocomplete="off" clearable :placeholder="$t('plsent')"></el-input>
                </el-form-item>
                <el-form-item :label="$t('unit')" label-width="70px" prop="unit">
                    <el-input v-model="editWuDataForm.unit" autocomplete="off" clearable :placeholder="$t('plsent')"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="editWuDialogVisible = false">{{$t('cancel')}}</el-button>
                <el-button type="primary" @click="editWuData(editWuDataForm)">{{$t('confirm')}}</el-button>
            </span>
        </el-dialog>
        <!-- 内部确认 -->
        <el-dialog :title="$t('verify')" :visible.sync="verifyDialogVisible" width="420px" class="smallDlog">
            <span>{{$t('whetherthematerinfoiscomplete')}}</span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="verifyDialogVisible = false">{{$t('cancel')}}</el-button>
                <el-button type="primary" @click="verifyData">{{$t('confirm')}}</el-button>
            </span>
        </el-dialog>
        <!-- 人员分配 -->
        <el-dialog :title="$t('verify')" :visible.sync="verifyCrewDialogVisible" width="420px" class="smallDlog">
            <span>{{$t('confirmationofparticipants')}}</span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="verifyCrewDialogVisible = false">{{$t('cancel')}}</el-button>
                <el-button type="primary" @click="verifyCrewData">{{$t('confirm')}}</el-button>
            </span>
        </el-dialog>
        <el-dialog :title="$t('add')" :visible.sync="addCrewDialogVisible" width="500px" class="smallDlog" :close-on-click-modal="false" @close="addCrewDlogClose(addCrewDataForm)">
            <el-form :model="addCrewDataForm" :rules="addCrewRules" :ref="addCrewDataForm" class="motuoForm">
                <el-form-item :label="$t('stage')" label-width="70px" prop="stage">
                    <el-input v-model="addCrewDataForm.stage" autocomplete="off" clearable :placeholder="$t('plsent')"></el-input>
                </el-form-item>
                <el-form-item :label="$t('staff')" label-width="70px" prop="staff">
                    <el-input v-model="addCrewDataForm.staff" autocomplete="off" clearable :placeholder="$t('plsent')"></el-input>
                </el-form-item>
                <el-form-item :label="$t('remark')" label-width="70px" prop="remark">
                    <el-input v-model="addCrewDataForm.remark" autocomplete="off" clearable :placeholder="$t('plsent')"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="addCrewDialogVisible = false">{{$t('cancel')}}</el-button>
                <el-button type="primary" @click="addCrewData(addCrewDataForm)">{{$t('confirm')}}</el-button>
            </span>
        </el-dialog>
        <el-dialog :title="$t('modify')" :visible.sync="editCrewDialogVisible" width="500px" class="smallDlog" :close-on-click-modal="false" @close="editCrewDlogClose(editCrewDataForm)">
            <el-form :model="editCrewDataForm" :rules="editCrewRules" :ref="editCrewDataForm" class="motuoForm">
                <el-form-item :label="$t('stage')" label-width="70px" prop="stage">
                    <el-input v-model="editCrewDataForm.stage" autocomplete="off" clearable :placeholder="$t('plsent')"></el-input>
                </el-form-item>
                <el-form-item :label="$t('staff')" label-width="70px" prop="staff">
                    <el-input v-model="editCrewDataForm.staff" autocomplete="off" clearable :placeholder="$t('plsent')"></el-input>
                </el-form-item>
                <el-form-item :label="$t('remark')" label-width="70px" prop="remark">
                    <el-input v-model="editCrewDataForm.remark" autocomplete="off" clearable :placeholder="$t('plsent')"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="editCrewDialogVisible = false">{{$t('cancel')}}</el-button>
                <el-button type="primary" @click="editCrewData(editCrewDataForm)">{{$t('confirm')}}</el-button>
            </span>
        </el-dialog>
        <!-- 检测记录 -->
        <el-dialog :title="$t('verify')" :visible.sync="verifyTextDialogVisible" width="420px" class="smallDlog">
            <span>{{$t('confirmthatthetestiscomplete')}}</span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="verifyTextDialogVisible = false">{{$t('cancel')}}</el-button>
                <el-button type="primary" @click="verifyTextData">{{$t('confirm')}}</el-button>
            </span>
        </el-dialog>
        <el-dialog :title="$t('add')" :visible.sync="addTextDialogVisible" width="500px" class="smallDlog" :close-on-click-modal="false" @close="addTextDlogClose(addTextDataForm)">
            <el-form :model="addTextDataForm" :rules="addTextRules" :ref="addTextDataForm" class="motuoForm">
                <el-form-item :label="$t('testingresult')" label-width="70px" prop="testingresult">
                    <el-input v-model="addTextDataForm.testingresult" autocomplete="off" clearable :placeholder="$t('plsent')"></el-input>
                </el-form-item>
                <el-form-item :label="$t('remark')" label-width="70px" prop="remark">
                    <el-input v-model="addTextDataForm.remark" autocomplete="off" clearable :placeholder="$t('plsent')"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="addTextDialogVisible = false">{{$t('cancel')}}</el-button>
                <el-button type="primary" @click="addTextData(addTextDataForm)">{{$t('confirm')}}</el-button>
            </span>
        </el-dialog>
        <el-dialog :title="$t('modify')" :visible.sync="editTextDialogVisible" width="500px" class="smallDlog" :close-on-click-modal="false" @close="editTextDlogClose(editTextDataForm)">
            <el-form :model="editTextDataForm" :rules="editTextRules" :ref="editTextDataForm" class="motuoForm">
                <el-form-item :label="$t('testingresult')" label-width="70px" prop="testingresult">
                    <el-input v-model="editTextDataForm.testingresult" autocomplete="off" clearable :placeholder="$t('plsent')"></el-input>
                </el-form-item>
                <el-form-item :label="$t('remark')" label-width="70px" prop="remark">
                    <el-input v-model="editTextDataForm.remark" autocomplete="off" clearable :placeholder="$t('plsent')"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="editTextDialogVisible = false">{{$t('cancel')}}</el-button>
                <el-button type="primary" @click="editTextData(editTextDataForm)">{{$t('confirm')}}</el-button>
            </span>
        </el-dialog>
        <!-- 确认发货 -->
        <el-dialog :title="$t('verify')" :visible.sync="portDialogVisible" width="420px" class="smallDlog">
            <span>{{$t('haveyouconfirmedthedelivery')}}</span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="portDialogVisible = false">{{$t('cancel')}}</el-button>
                <el-button type="primary" @click="portData">{{$t('confirm')}}</el-button>
            </span>
        </el-dialog>
        <!-- 发货记录 -->
        <el-dialog :title="$t('verify')" :visible.sync="consigneeDialogVisible" width="420px" class="smallDlog">
            <span>{{$t('doyouconfirmreceipt')}}</span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="consigneeDialogVisible = false">{{$t('cancel')}}</el-button>
                <el-button type="primary" @click="consigneeData">{{$t('confirm')}}</el-button>
            </span>
        </el-dialog>
        <el-dialog :title="$t('add')" :visible.sync="addDeliveryDialogVisible" width="500px" class="smallDlog" :close-on-click-modal="false" @close="addDeliveryDlogClose(addDeliveryDataForm)">
            <el-form :model="addDeliveryDataForm" :rules="addDeliveryRules" :ref="addDeliveryDataForm" class="motuoForm">
                <el-form-item :label="$t('trackingnumber')" label-width="70px" prop="trackingnumber">
                    <el-input v-model="addDeliveryDataForm.trackingnumber" autocomplete="off" clearable :placeholder="$t('plsent')"></el-input>
                </el-form-item>
                <el-form-item :label="$t('consigner')" label-width="70px" prop="consigner">
                    <el-input v-model="addDeliveryDataForm.consigner" autocomplete="off" clearable :placeholder="$t('plsent')"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="addDeliveryDialogVisible = false">{{$t('cancel')}}</el-button>
                <el-button type="primary" @click="addDeliveryData(addDeliveryDataForm)">{{$t('confirm')}}</el-button>
            </span>
        </el-dialog>
        <el-dialog :title="$t('modify')" :visible.sync="editDeliveryDialogVisible" width="500px" class="smallDlog" :close-on-click-modal="false" @close="editDeliveryDlogClose(editDeliveryDataForm)">
            <el-form :model="editDeliveryDataForm" :rules="editDeliveryRules" :ref="editDeliveryDataForm" class="motuoForm">
                <el-form-item :label="$t('trackingnumber')" label-width="70px" prop="trackingnumber">
                    <el-input v-model="editDeliveryDataForm.trackingnumber" autocomplete="off" clearable :placeholder="$t('plsent')"></el-input>
                </el-form-item>
                <el-form-item :label="$t('consigner')" label-width="70px" prop="consigner">
                    <el-input v-model="editDeliveryDataForm.consigner" autocomplete="off" clearable :placeholder="$t('plsent')"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="editDeliveryDialogVisible = false">{{$t('cancel')}}</el-button>
                <el-button type="primary" @click="editDeliveryData(editDeliveryDataForm)">{{$t('confirm')}}</el-button>
            </span>
        </el-dialog>
        <!-- 订单完成 -->
        <el-dialog :title="$t('ordercomp')" :visible.sync="orderSucDialogVisible" width="420px" class="smallDlog">
            <span>{{$t('confirmwhethertheorderhasbeencompleted')}}</span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="orderSucDialogVisible = false">{{$t('cancel')}}</el-button>
                <el-button type="primary" @click="orderSucData">{{$t('confirm')}}</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import Cookie from 'js-cookie'
export default {
    data () {
        return {
            state: '',
            orderPer: {
                confirm: 'Zero',
                distributor: 'Rosion',
                director: 'Weirm'
            },
            dosageTab: [{
                name: 'ss',
                type: 'ww',
                number: 2,
                unit: 'm'
            },{
                name: 'cole',
                type: 'crazy',
                number: 1,
                unit: 'pop'
            }],
            makeRecordTab: [
                {
                    stage: '领料',
                    staff: 'after',
                    time: '2020-07-17',
                    remark: 'good'
                },{
                    stage: '裁剪',
                    staff: 'after',
                    time: '2020-07-17',
                    remark: 'good'
                },{
                    stage: '缝制',
                    staff: 'after',
                    time: '2020-07-17',
                    remark: 'good'
                },{
                    stage: '绣花',
                    staff: 'after',
                    time: '2020-07-17',
                    remark: 'good'
                },{
                    stage: '包装',
                    staff: 'after',
                    time: '2020-07-17',
                    remark: 'good'
            }],
            express: {
                trackingnumber: 'AF1234567890',
                time: '2020-07-03',
                consigner: 'kungfu'
            },
            exportDialogVisible: false,
            addWuDialogVisible: false,
            addWuDataForm: {
                name: '',
                type: '',
                number: '',
                unit: ''
            },
            addWuRules: {
                name: [
                    { required: true, message: this.$t('cannotbeemp'), trigger: 'blur'}
                ],
                type: [
                    { required: true, message: this.$t('cannotbeemp'), trigger: 'blur'}
                ],
                number: [
                    { required: true, message: this.$t('cannotbeemp'), trigger: 'blur'}
                ],
                unit: [
                    { required: true, message: this.$t('cannotbeemp'), trigger: 'blur'}
                ]
            },
            editWuDialogVisible: false,
            editWuDataForm: {
                name: '',
                type: '',
                number: '',
                unit: ''
            },
            editWuRules: {
                name: [
                    { required: true, message: this.$t('cannotbeemp'), trigger: 'blur'}
                ],
                type: [
                    { required: true, message: this.$t('cannotbeemp'), trigger: 'blur'}
                ],
                number: [
                    { required: true, message: this.$t('cannotbeemp'), trigger: 'blur'}
                ],
                unit: [
                    { required: true, message: this.$t('cannotbeemp'), trigger: 'blur'}
                ]
            },
            verifyDialogVisible: false,
            addCrewDialogVisible: false,
            addCrewRules: {
                stage: [
                    { required: true, message: this.$t('cannotbeemp'), trigger: 'blur'}
                ],
                staff: [
                    { required: true, message: this.$t('cannotbeemp'), trigger: 'blur'}
                ],
                remark: [
                    { required: true, message: this.$t('cannotbeemp'), trigger: 'blur'}
                ]
            },
            addCrewDataForm: {
                stage: '',
                staff: '',
                remark: ''
            },
            editCrewDialogVisible: false,
            editCrewRules: {},
            editCrewDataForm: {
                stage: '',
                staff: '',
                remark: ''
            },
            verifyCrewDialogVisible: false,
            addTextDialogVisible: false,
            addTextDataForm: {
                testingresult: '',
                remark: ''
            },
            addTextRules: {
                testingresult: [
                    { required: true, message: this.$t('cannotbeemp'), trigger: 'blur'}
                ],
                remark: [
                    { required: true, message: this.$t('cannotbeemp'), trigger: 'blur'}
                ]
            },
            editTextDialogVisible: false,
            editTextDataForm: {
                testingresult: '',
                remark: ''
            },
            editTextRules: {
                testingresult: [
                    { required: true, message: this.$t('cannotbeemp'), trigger: 'blur'}
                ],
                remark: [
                    { required: true, message: this.$t('cannotbeemp'), trigger: 'blur'}
                ]
            },
            detectionTab: [{
                    testingresult: 'pass',
                    name: 'tizzy t',
                    time: '2020-07-31',
                    remark: '如果说我变了'
                },{
                    testingresult: 'nopass',
                    name: 'jony j',
                    time: '2020-07-31',
                    remark: 'WTF'
                }
            ],
            verifyTextDialogVisible: false,
            portDialogVisible: false,
            addDeliveryDialogVisible: false,
            addDeliveryDataForm: {
                trackingnumber: '',
                consigner: ''
            },
            addDeliveryRules: {
                trackingnumber: [
                    { required: true, message: this.$t('cannotbeemp'), trigger: 'blur'}
                ],
                consigner: [
                    { required: true, message: this.$t('cannotbeemp'), trigger: 'blur'}
                ]
            },
            editDeliveryDialogVisible: false,
            editDeliveryDataForm: {
                trackingnumber: '',
                consigner: ''
            },
            editDeliveryRules: {
                trackingnumber: [
                    { required: true, message: this.$t('cannotbeemp'), trigger: 'blur'}
                ],
                consigner: [
                    { required: true, message: this.$t('cannotbeemp'), trigger: 'blur'}
                ]
            },
            consigneeDialogVisible: false,
            orderSucDialogVisible: false
        }
    },
    methods: {
        back () {
            this.$router.go(-1)
        },
        exportData () {},
        getMaterialDetails (data) {
            this.editWuDataForm.name = data.name 
            this.editWuDataForm.type = data.type 
            this.editWuDataForm.number = data.number 
            this.editWuDataForm.unit = data.unit 
            this.editWuDialogVisible = true
        },
        getItemDetails (data) {
            this.editCrewDataForm.stage = data.stage
            this.editCrewDataForm.staff = data.staff
            this.editCrewDataForm.remark = data.remark
            this.editCrewDialogVisible = true
        },
        getDetectionDetails (data) {
            this.editTextDataForm.testingresult = data.testingresult
            this.editTextDataForm.remark = data.remark
            this.editTextDialogVisible = true
        },
        getShipmentsDetails (data) {
            this.editDeliveryDataForm.trackingnumber = data.trackingnumber
            this.editDeliveryDataForm.consigner = data.consigner
            this.editDeliveryDialogVisible = true
        },
        // 内部确认
        verifyData () {
            this.$message({
                type: 'success',
                message: this.$t('materialsettingiscompleted')
            })
            this.verifyDialogVisible = false
            this.$router.push('/mdorder')
        },
        // 分配确认
        distributionConfirm () {},
        addWuDlogClose (form) {
            this.$refs[form].resetFields()
        },
        addWuData (form) {
            this.$refs[form].validate((valid) => {
                if (!valid) return
                this.$message({
                    type: 'success',
                    message: this.$t('sucadd')
                })
                this.addWuDialogVisible = false
            })
        },
        editWuDlogClose (form) {
            this.$refs[form].resetFields()
        },
        editWuData (form) {
            this.$refs[form].validate((valid) => {
                if (!valid) return
                this.editWuDialogVisible = false
                this.$message({
                    type: 'success',
                    message: this.$t('modifysuc')
                })
            })
        },
        // 人员分配
        addCrewDlogClose (form) {
            this.$refs[form].resetFields()
        },
        addCrewData (form) {
            this.$refs[form].validate((valid) => {
                if (!valid) return
                this.addCrewDialogVisible = false
                this.$message({
                    type: 'success',
                    message: this.$t('sucadd')
                })
            })
        },
        editCrewDlogClose (form) {
            this.$refs[form].resetFields()
        },
        editCrewData (form) {
            this.$refs[form].validate((valid) => {
                if (!valid) return
                this.editCrewDialogVisible = false
                this.$message({
                    type: 'success',
                    message: this.$t('modifysuc')
                })
            })
        },
        verifyCrewData () {
            this.$message({
                type: 'success',
                message: this.$t('productionpersonneldistributioncompleted')
            })
            this.verifyCrewDialogVisible = false
            this.$router.push('/mdorder')
        },
        addTextDlogClose (form) {
            this.$refs[form].resetFields()
        },
        addTextData (form) {
            this.$refs[form].validate((valid) => {
                if (!valid) return
                this.$message({
                    type: 'success',
                    message: this.$t('sucadd')
                })
                this.addTextDialogVisible = false
            })
        },
        editTextDlogClose (form) {
            this.$refs[form].resetFields()
        },
        editTextData (form) {
            this.$refs[form].validate((valid) => {
                if (!valid) return
                this.editTextDialogVisible = false
                this.$message({
                    type: 'success',
                    message: this.$t('modifysuc')
                })
            })
        },
        verifyTextData () {
            this.$message({
                type: 'success',
                message: this.$t('producttestingcompleted')
            })
            this.verifyTextDialogVisible = false
            this.$router.push('/mdorder')
        },
        portData () {
            this.$message({
                type: 'success',
                message: this.$t('confirmsuccessfuldelivery')
            })
            this.portDialogVisible = false
            this.$router.push('/mdorder')
        },
        addDeliveryDlogClose (form) {
            this.$refs[form].resetFields()
        },
        addDeliveryData (form) {
            this.$refs[form].validate((valid) => {
                if (!valid) return
                this.$message({
                    type: 'success',
                    message: this.$t('sucadd')
                })
                this.addDeliveryDialogVisible = false
            })
        },
        editDeliveryDlogClose (form) {
            this.$refs[form].resetFields()
        },
        editDeliveryData (form) {
            this.$refs[form].validate((valid) => {
                if (!valid) return
                this.$message({
                    type: 'success',
                    message: this.$t('modifysuc')
                })
                this.editDeliveryDialogVisible = false
            })
        },
        consigneeData () {
            this.$message({
                type: 'success',
                message: this.$t('thegoodssuccessfully')
            })
            this.consigneeDialogVisible = false
            this.$router.push('/mdorder')
        },
        orderSucData () {
            this.$message({
                type: 'success',
                message: this.$t('theorderhasbeencompleted')
            })
            this.orderSucDialogVisible = false
            this.$router.push('/mdorder')
        }
    },
    mounted () {
        this.state = Cookie.get('mdorderState')
    },
    destroyed () {
        Cookie.remove('mdorderState')
    }
}
</script>

<style lang="less" scoped>
@import './mdorderDet.less';
</style>
